<template lang="html">
  <div id="pay" class="box">
    <div class="wpr box">
      <div class="wraning text-c">
          第{{ present.termNo }}期还款金额<br/>
          <small>{{ present.repayDate }}</small>
          <var>{{ present.totalAmt }}</var>元
      </div>
      <div class="payToolList">
        <div class="item bank" @click="radioArrFn(0)">
          <div class="flex">
            <span>
              <img src="../assets/img/icon-bankCard.png" style="width:.72rem" alt="" />
            </span>
            <span>
              <div class="flex">
                <var>银行卡支付(支持储蓄卡，无需开通网银)</var>
                <span :class="{icon:true,'el-icon-success':this.radioArr[0]}"></span>
              </div>
              招商银行储蓄卡（{{ (userInfo.bankCardNo||"").substr(-4,4) }}）
            </span>
          </div>
        </div>
        <!-- <div class="item wx"  @click="radioArrFn(1)">
          <div class="flex">
            <span>
              <img src="../assets/img/icon-wx.png" style="width:.6rem" alt="" />
            </span>
            <span>
              <div class="flex">
                <var>微信支付</var>
                <span :class="{icon:true,'el-icon-success':this.radioArr[1]}"></span>
              </div>
            </span>
          </div>
        </div> -->

      </div>
    </div>
    <div class="fixBtnShim"></div>
    <a href="javascript:void(0)" style="background-color:#74d220" @click='checkPay' class="fixBtn">确认支付</a>
  </div>
</template>

<script>
import { mapActions} from 'vuex';
import {MessageBox} from 'element-ui';
export default {
  data() {
    return {
      radioArr:[true,false],
      userI:{},
      userInfo:{},
      present:{}
    }
  },
  methods:{
    ...mapActions([
      'userOrder_getOrder','getUserMsg','getAuthCode','authPayConfirm'
    ]),
    radioArrFn(ac){
      this.radioArr = [false,false];
      this.radioArr[ac] = true;
    },
    async checkPay() {

      // alert('支付成功 查看个人还款信息?')
      this.getAuthCode({
        instalmentId:this.present.id,
        userId:this.$store.state.User.info.userId,
        amount:this.present.totalAmt.toString()
      }).then(res => {
        console.log(res);
        if(res.result_code == '400'){
          this.opSms(res.transId);

        }else{
          alert('信息缺少或服务器错误')
        }
        // MessageBox.alert(res.result_info, '', {
        //   confirmButtonText: '确定',
        // });
      })
    },
    opSms(transId){

      this.$alert('<input type="text" maxLength="6" class="entSms" />', '请输入验证码', {
          dangerouslyUseHTMLString: true
      }).then(({val}) => {
        alert(document.querySelector('.entSms').value);
        this.authPayConfirm({
          userId:this.$store.state.User.info.userId,
          orderId:transId,
          smsCode:document.querySelector('.entSms').value
        }).then(res => {
          console.log(res);
        })
      })
    }
  },
  beforeCreate(){
    this.setTit('支付')
    this.$store.commit('starLoading');
  },
  async beforeMount() {
    this.userI = await this.userOrder_getOrder({phonenumber:this.$store.state.User.info.mobile});
    this.userInfo = await this.getUserMsg({userId:this.$store.state.User.info.userId});
    let res = await this.$store.dispatch('getInstalmentOrder',{orderId:this.userI.id});
    // let res = await this.$store.dispatch('getInstalmentOrder',{orderId:20180123140112100000});
    this.present = res.present;
    this.$store.commit('closeLoading');
    console.log(this.userInfo);
  },
  mounted(){

  }
}
</script>

<style lang="scss">
#pay{
  padding:0 .2rem;
  .wraning{
    font-size: .22rem;color:#333;line-height: 1.4;border-top: .02rem #efefef solid;padding-top: .5rem;
    var{color:#ec5f51;font-size: .5rem;}
    small{margin-bottom:.1rem;display: block;}
  }
  .payToolList{
    margin-top:.5rem;font-size: .24rem;
    .item{padding:.25rem .44rem;border-top:.02rem #efefef solid;line-height: 1.12rem;}
    .flex{justify-content: space-between;}
    .icon{line-height: 1.12rem;}
    .icon:after{content:"";display: inline-block;vertical-align: sub;width:.28rem;height:.28rem;border:1px #999 solid;border-radius: 50%;}
  }
  .item>.flex>span:nth-child(2){width:4.85rem;}
  .bank>.flex>span:nth-child(2) .flex{border-bottom:.02rem #e6e6e6 solid;}
  .el-icon-success{font-size: .32rem;color:#77d034;}
  .el-icon-success.icon:after{content:"";display: none;}
  img{vertical-align: middle;}

}
.entSms{border:1px #d2d2d2 solid;width:80%;display: block;margin:0 auto .12rem;line-height: 2;font-size: .42rem;text-align: center;letter-spacing: .14rem;}
div .el-message-box{width:80%;padding-bottom: .2rem;font-size: .36rem;border-radius: .08rem;}
div .el-message-box__title{font-size: .36rem;}
div .el-message-box__content{font-size: .3rem;color:#999;}

</style>
